<template>
  <n-card :bordered="false" title="小程序配置" :segmented="{content: true,footer: 'soft'}">
    <n-form
        ref="wechatFormRef"
        :model="wechatForm"
        :rules="wechatFormRules"
        label-placement="left"
        :label-width="120"
        require-mark-placement="left"
        :style="{maxWidth: '540px'}"
    >
      <n-form-item label="AppID" path="appid">
        <n-input v-model:value="wechatForm.appid" placeholder="请输入小程序ID" clearable/>
      </n-form-item>
      <n-form-item label="AppSecret" path="secret">
        <n-input v-model:value="wechatForm.secret" placeholder="请输入AppSecret(小程序秘钥)" clearable/>
      </n-form-item>
      <n-form-item label="商户号(mchid)" path="mchid">
        <n-input v-model:value="wechatForm.mchid" placeholder="请输入直连商户号(mchid)" clearable/>
      </n-form-item>
      <n-form-item label="商户秘钥" path="appSecret">
        <n-input v-model:value="wechatForm.appSecret" placeholder="请输入商户秘钥" clearable/>
      </n-form-item>
      <n-form-item label="商户证书序列号" path="serialNumber">
        <n-input v-model:value="wechatForm.serialNumber" placeholder="请输入商户证书序列号" clearable/>
      </n-form-item>
      <n-form-item label="商户API公钥" path="apiclientCert">
        <n-input v-model:value="wechatForm.apiclientCert"
                 type="textarea"
                 size="small"
                 :autosize="{ minRows: 5,maxRows:5}"
                 placeholder="请输入商户API公钥" clearable/>
      </n-form-item>
      <n-form-item label="商户API私钥" path="privateKey" label-style="letter-spacing: 3px;">
        <n-input v-model:value="wechatForm.privateKey"
                 type="textarea"
                 size="small"
                 :autosize="{ minRows: 5,maxRows:5}"
                 placeholder="请输入商户API私钥" clearable/>
      </n-form-item>
      <n-form-item label="支付回调" path="notifyUrl">
        <n-input v-model:value="wechatForm.notifyUrl" placeholder="请输入支付回调地址" clearable/>
      </n-form-item>
<!--      <n-form-item label="业务域名文件" path="business">-->
<!--        <div>-->
<!--          <div>-->
<!--            <div class="select-img" style="width: 75px;height: 70px;margin-bottom: 10px;"-->
<!--                 :class="appStore.theme=='light'?'light-img':'dark-img'">-->
<!--              <div class="select-img-img">-->
<!--                <template v-if="wechatForm.business">-->
<!--                  <n-icon :size="48" color="color(srgb 0.99 0.84 0.24)">-->
<!--                    <FileWordFilled/>-->
<!--                  </n-icon>-->
<!--                </template>-->
<!--                <template v-else>-->
<!--                  <p style="margin-block-start: 0;margin-block-end: 0;">未上传</p>-->
<!--                </template>-->
<!--              </div>-->
<!--            </div>-->
<!--            <n-upload-->
<!--                action="/api/wechat/upload_bus_file"-->
<!--                :show-file-list="false"-->
<!--                :headers="uploadHeader"  @finish="uploadFinish($event)">-->
<!--              <n-button size="small">{{wechatForm.business?'更换':'上传'}}文件</n-button>-->
<!--            </n-upload>-->
<!--          </div>-->
<!--          <p class="tips_p">小程序业务域名文件，不上传此文件、小程序无法正常请求后端</p>-->
<!--        </div>-->
<!--      </n-form-item>-->
      <n-form-item label="&nbsp;">
        <n-button type="primary" :loading="handelSubmitLoading" @click="handelSubmitData">保存</n-button>
      </n-form-item>
    </n-form>
  </n-card>

</template>
<script setup lang="ts">
import {onBeforeMount, ref, computed} from 'vue'
import {FormInst, useMessage} from 'naive-ui';
import {postPutRequest, getRequest} from "@/api/data.ts";
import {uploadFileHeader} from '@/util/Auth.ts';
import {UseAppStore} from "@/stores/app.ts";
import {FileWordFilled} from '@vicons/antd'

const appStore = UseAppStore();
const message = useMessage()

interface configFormItem {
  id: number,
  appid: null | string,
  secret: null | string,
  appSecret: null | string,
  mchid: null | string,
  serialNumber: null | string,
  apiclientCert: null | string,
  privateKey: null | string,
  business: null | string,
  notifyUrl: null | string,
}

//上传文件头部
const uploadHeader = computed(() => {
  return uploadFileHeader();
});
const wechatFormRef = ref<FormInst | null>(null);
const handelSubmitLoading = ref<boolean>(false);
const wechatForm = ref<configFormItem>({
  id: 0,
  appid: null,
  secret: null,
  mchid: null,
  appSecret: null,
  serialNumber: null,
  apiclientCert: null,
  privateKey: null,
  business: null,
  notifyUrl: null,
})
const wechatFormRules = ref({
  appid: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入小程序ID'
  },
  secret: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入AppSecret(小程序秘钥)'
  }
})
const handelSubmitData = (e: MouseEvent) => {
  e.preventDefault();
  wechatFormRef.value?.validate((errors) => {
    if (!errors) {
      handelSubmitLoading.value=true;
      postPutRequest('wechat/save_config', wechatForm.value, 'POST').then((result: ResponseResult) => {
        if (result.code === 200) {
          message.success(result.message, {
            duration: 1500,
            onLeave() {
              handelSubmitLoading.value=false;
            }
          })
        } else {
          message.error(result.message);
          handelSubmitLoading.value = false;
        }
      })
    }
  })
}
const getConfig = () => {
  getRequest('wechat/get_conf').then((res: ResponseResult) => {
    const {data} = res;
    if (data) {
      wechatForm.value.id = data.id;
      wechatForm.value.appid = data.appid;
      wechatForm.value.secret = data.secret;
      wechatForm.value.appSecret = data.appSecret;
      wechatForm.value.mchid = data.mchid;
      wechatForm.value.business = data.business;
      wechatForm.value.serialNumber = data.serialNumber;
      wechatForm.value.privateKey = data.privateKey;
      wechatForm.value.apiclientCert = data.apiclientCert;
      wechatForm.value.notifyUrl = data.notifyUrl;
    }
  })
}
const uploadFinish = ({event}: { event?: ProgressEvent | any }) => {
  const res=JSON.parse(event['currentTarget']['response']);
  const {code} = res;
  if (code === 200) {
    wechatForm.value.business = res.data;
  }
  message.create(res.message,{
    type:code===200?'success':'error'
  });
}

onBeforeMount(() => {
  getConfig();
})
</script>
<style scoped lang="scss">

</style>